<template>
  <Tab
    :data="tabData"
    class="flex-center"
  />
  <div class="income">
    <div class="income-ele pt100">
      <div class="ele fn24">
        547.
        <span class="fn14">34kWh</span>
      </div>
      <div class="fn12 mt8">今日发电</div>
    </div>
    <div class="line"></div>
    <div class="money mt8 flex-center-middle">
      <img 
        v-lazy="incomeMoney"
        class="income-money"
      >
      <div class="flex-col-start ml8">
        <div class="fn12">今日收益</div>
        <div class="money-num fn12 mt8">
          ￥
          <span class="fn18">233.53</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Tab from '@/components/Tab/index.vue'
import incomeMoney from '@imgs/income-icon.png?url'
const tabData = [
  { id: '1', text: '今日' },
  { id: '2', text: '本月' },
  { id: '3', text: '总量' }
]
</script>

<style lang="scss" scoped>
.income {
  .income-ele {
    background: url(@imgs/screen_run.png) 0 0 no-repeat;
    width: 360px;
    height: 208px;
    background-size: 100%;
    background-position: center;
  }
  .line {
    width: 3px;
    height: 104px;
    background: linear-gradient(180deg, #03FBFF 0%, rgba(9,253,255,0.0001) 100%);
    opacity: 1;
    margin: auto;
  }
  .money {
    background: url(@imgs/border.png) 0 0 no-repeat;
    width: 257px;
    height: 105px;
    background-size: 100% 100%;
    .income-money {
      width: 57px;
      height: 57px;
    }
  }
}
.pt100 {
  padding-top: 40px;
}
</style>
